<!--
 * @author: Kate-sy
 * @create: 2021-06-23 17:30 PM
 * @license: MIT
 * @lastAuthor: Kate-sy
 * @lastEditTime: 2021-06-28 17:02 PM
 * @desc: 
-->
<template>
  <div class="add-wrap">
    <div class="additem">
      关于
      <div class="pot"></div>
      营业执照
      <div class="pot"></div>
      友情链接
      <div class="pot"></div>
      更多文章
    </div>
    <div class="additem">
      用户协议
      <div class="pot"></div>
      隐私政策
      <div class="pot"></div>
      使用指南
    </div>
    <div class="additem">京ICP备18012699号-3</div>
    <div class="additem">
      京公网安备11010802026719号
      <div class="pot"></div>
    </div>
    <div class="additem">
      版权所有：北京北比信息技术有限公司
      <div class="pot"></div>
    </div>
    <div class="additem">公司地址：北京市海淀区信息路甲28号13层B座13B-5</div>
    <div class="additem">
      公司座机：010-83434395
      <div class="pot"></div>
    </div>
    <div class="additem">举报邮箱：feedback@xitu.io</div>
    <div class="additem">©2021 掘金</div>
    <div class="icon">
      <img
        src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/weibo.0cd39f5.png"
        alt=""
      />
      <img
        src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/wechat.ce329e6.png"
        alt=""
      />
      <div class="weix">
        <section>微信扫一扫</section>
        <img
          src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/juejin-qr.b247fde.jpeg"
          alt=""
        />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Address",
};
</script>
<style lang="scss" scopde>
.pot {
  width: 2px;
  height: 2px;
  border-radius: 2px;
  background-color: #909090;
  margin-left: 8px;
  margin-right: 8px;
}
.add-wrap {
  width: 240px;
  display: flex;
  flex-wrap: wrap;
  .additem {
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    @include font(12px, #909090);
  }
  .icon {
    margin-top: 6px;
    position: relative;

    img {
      width: 24px;
      height: 24px;
      margin-right: 12px;
    }
    .weix {
      width: 120px;
      height: 145px;
      padding: 12px 5px;
      background-color: #fff;
      position: absolute;
      display: none;
      top: 30px;
      left: -10px;
      border: 1px solid rgb(216, 216, 216);
      section {
        @include flex(center, center);
        width: 100%;
        @include font(12px, #909090);
        margin-bottom: 8px;
      }
      img {
        width: 120px;
        height: 120px;
      }
    }
  }
  .icon img:nth-child(2) {
    &:hover + .weix {
      display: block;
    }
  }
}
</style>